<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物</title>
  <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、
    服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
  <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">

  <!-- 引入facicon.ico网页图标 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 引入css文件 -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/index.css">
  <!-- 引入首页的css -->
  <link rel="stylesheet" href="css/index.css">
  <!-- 引入swiper的css -->
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2095554_aze0vohcjxe.css">

</head>

<body>
  <!-- 顶部快捷导航start -->
  <div class="shortcut">
    <div class="w">
      <div class="fl">
        <ul>
          <li>品优购欢迎您！ </li>
          <li>
            <a href="#">请登录</a>
            <a href="#" class="style-red">免费注册</a>
          </li>
        </ul>
      </div>
      <div class="fr">
        <ul>
          <li><a href="#">我的订单</a></li>
          <li class="spacer"></li>
          <li>
            <a href="#">我的品优购</a>
            <i class="iconfont icon-arrow"></i>
          </li>
          <li class="spacer"></li>
          <li><a href="#">品优购会员</a></li>
          <li class="spacer"></li>
          <li><a href="#">企业采购 </a></li>
          <li class="spacer"></li>
          <li>
            <a href="#">关注品优购 </a>
            <i class="iconfont icon-arrow"></i>
          </li>
          <li class="spacer"></li>
          <li>
            <a href="#">客户服务 </a>
            <i class="iconfont icon-arrow"></i>
          </li>
          <li class="spacer"></li>
          <li>
            <a href="#">网站导航</a>
            <i class="iconfont icon-arrow"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 顶部快捷导航end -->

  <!-- header制作start -->
  <div class="header w">
    <!-- logo -->
    <div class="logo">
      <h1>
        <a href="index.html" title="品优购">品优购</a>
      </h1>
    </div>
    <!-- search -->
    <div class="search">
      <input type="text" class="text" value="请输入搜索内容...">
      <button class="btn">搜索</button>
    </div>
    <!-- hotwords -->
    <div class="hotwords">
      <a href="#" class="style-red">优惠购首发</a>
      <a href="#">亿元优惠</a>
      <a href="#">9.9元团购</a>
      <a href="#">美满99减30</a>
      <a href="#">办公用品</a>
      <a href="#">电脑</a>
      <a href="#">通信</a>
    </div>
    <!-- shopcar -->
    <div class="shopcar">
      <i class="iconfont icon-shopcar"></i>
      我的购物车
      <i class="iconfont icon-arrow-right"></i>
      <i class="count">12</i>
    </div>
  </div>
  <!-- header制作end -->

  <!-- nav制作start -->
  <div class="nav">
    <div class="w">
      <div class="dropdown fl">
        <div class="dt">全部商品分类</div>
        <div class="dd">
          <ul>
            <li class="items"><a href="#">家用电器</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">手机、数码、通信</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">电脑、办公</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">家居、家具、家装、厨具</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">男装、女装、童装、内衣</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">个户化妆、清洁用品、宠物</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">鞋靴、箱包、珠宝、奢侈品</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">运动户外、钟表</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">汽车、汽车用品</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">母婴、玩具乐器</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">食品、酒类、生鲜、特产</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">医药保健</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">图书、音像、电子书</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">彩票、旅行、充值、票务</a><i class="iconfont icon-arrow-right"></i></li>
            <li class="items"><a href="#">理财、众筹、白条、保险</a><i class="iconfont icon-arrow-right"></i></li>
          </ul>
        </div>
      </div>
      <div class="navitems fl">
        <ul>
          <li><a href="#">服装城</a></li>
          <li><a href="#">美妆馆</a></li>
          <li><a href="#">传智超市</a></li>
          <li><a href="#">全球购</a></li>
          <li><a href="#">闪购</a></li>
          <li><a href="#">团购</a></li>
          <li><a href="#">拍卖</a></li>
          <li><a href="#">有趣 </a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- nav制作end -->

  <!-- 首页专有的模块 main start-->
  <div class="w">
    <div class="main">
      <!-- 轮播图 -->
      <div class="focus">
        <!-- Swiper -->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./upload/focus1.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="./upload/focus2.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="./upload/focus3.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="./upload/focus4.jpg" alt="">
            </div>
          </div>
          <!-- Add Arrows -->
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <!-- 快报 -->
      <div class="newsflash">
        <div class="news">
          <div class="news-hd">
            <h5>品优购快报</h5>
            <i class="iconfont icon-arrow-right"></i>
            <a href="#" class="more">更多</a>
          </div>
          <div class="news-info">
            <ul>
              <li>
                <a href="#">[特惠]备战开学季 全民半价购数码</a>
              </li>
              <li>
                <a href="#">[公告]品优稳占家电网购六成份额</a>
              </li>
              <li>
                <a href="#">[特惠]百元中秋全品类礼券免费领</a>
              </li>
              <li>
                <a href="#">[公告]商品优生鲜 享阳澄湖大闸蟹</a>
              </li>
              <li>
                <a href="#">[特惠]每日享折扣品优品质游 更多精彩请点此进入吧</a>
              </li>
            </ul>
          </div>
        </div>
        <!-- 精灵图 -->
        <div class="lifeservice">
          <ul>
            <li>
              <i class="sprite"></i>
              <p>话费</p>
            </li>
            <li>
              <i class="sprite"></i>
              <p>机票</p>
            </li>
            <li>
              <i class="sprite"></i>
              <p>电影票</p>
            </li>
            <li>
              <i class="sprite"></i>
              <p>游戏</p>
            </li>
            <li>
              <i class="sprite"></i>
              <p>彩票</p>
            </li>
            <li>
              <i class="sprite"></i>
              <p>加油卡</p>
            </li>
            <li>
              <i class="sprite"></i>
              <p>酒店</p>
            </li>
            <li>
              <i class="sprite"></i>
              <p>火车票</p>
            </li>
            <li>
              <i class="sprite"></i>
              <p>众筹</p>
            </li>
            <li>
              <i class="sprite"></i>
              <p>理财</p>
            </li>
            <li>
              <i class="sprite"></i>
              <p>礼品卡</p>
            </li>
            <li>
              <i class="sprite"></i>
              <p>白条</p>
            </li>
          </ul>
        </div>
        <div class="bargain">
          <img src="./upload/bargain.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <!-- 首页专有的模块 main end-->

  <!-- 首页专有的模块recom推荐模块 start-->
  <div class="w recom">
    <div class="recom-hd">
      <img src="./upload/recom_hd.png" alt="#">
    </div>
    <div class="recom-bd">
      <ul>
        <li><img src="./upload/recom01.png" alt=""></li>
        <li><img src="./upload/recom02.png" alt=""></li>
        <li><img src="./upload/recom03.png" alt=""></li>
        <li><img src="./upload/recom04.png" alt=""></li>
      </ul>
    </div>
  </div>
  <!-- 首页专有的模块recom推荐模块 end-->

  <!-- 首页专有的模块 guess-love猜你喜欢 模块 start-->
  <div class="w guess-love">
    <div class="guess-hd">
      <h5>猜你喜欢</h5>
      <i class="iconfont icon-change"></i>
      <a>换一批</a>
    </div>
    <div class="guess-bd">
      <ul>
        <li>
          <a href="#"><img src="./upload/guess01.png" alt="#"></a>
          <div class="info">
            <p>阳光美包新款单肩包女包</p>
            <p>时尚子母包四件套女</p>
            <p>￥116.00</p>
          </div>
        </li>
        <li>
          <a href="#"><img src="./upload/guess02.png" alt="#"></a>
          <div class="info">
            <p>爱仕达30CM炒锅不粘锅</p>
            <p>NWG8330E电磁炉炒</p>
            <p>￥116.00</p>
          </div>
        </li>
        <li>
          <a href="#"><img src="./upload/guess03.png" alt="#"></a>
          <div class="info">
            <p>捷波朗</p>
            <p>( jabra )BOOSI劲步</p>
            <p>￥116.00</p>
          </div>
        </li>
        <li>
          <a href="#"><img src="./upload/guess04.png" alt="#"></a>
          <div class="info">
            <p>欧普</p>
            <p>JYLZ08面板灯平板灯铝</p>
            <p>￥116.00</p>
          </div>
        </li>
        <li>
          <a href="#"><img src="./upload/guess05.png" alt="#"></a>
          <div class="info">
            <p>三星</p>
            <p>( G5500 )移动联</p>
            <p>￥116.00</p>
          </div>
        </li>
        <li>
          <a href="#"><img src="./upload/guess06.png" alt="#"></a>
          <div class="info">
            <p>韩国所望</p>
            <p>紧致湿润精华露400ml</p>
            <p>￥116.00</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 首页专有的模块 guess-love猜你喜欢 模块 end-->

  <!-- 首页专有的模块 楼层区floor 模块 start-->
  <div class="floor">
    <!-- 家用电器 -->
    <div class="w jiadian">
      <!-- 标题 -->
      <div class="box-hd">
        <h3>家用电器</h3>
        <div class="tab_list">
          <ul>
            <li><a href="#" class="default">热门</a>|</li>
            <li><a href="#">大家电</a>|</li>
            <li><a href="#">生活电器</a>|</li>
            <li><a href="#">厨房电器</a>|</li>
            <li><a href="#">个护健康</a>|</li>
            <li><a href="#">应季电器</a>|</li>
            <li><a href="#">空气/净水</a>|</li>
            <li><a href="#">新奇特</a>|</li>
            <li><a href="#">高端电器</a></li>
          </ul>
        </div>
      </div>
      <!--内容 -->
      <div class="box-bd">
        <div class="tab_content">
          <div class="tab_list_item1">
            <div class="col1">
              <ul>
                <li><a href="#">节能补贴</a></li>
                <li><a href="#">4K电视</a></li>
                <li><a href="#">空气净化器</a></li>
                <li><a href="#">IH电饭煲</a></li>
                <li><a href="#">滚筒洗衣机</a></li>
                <li><a href="#">电热水器</a></li>
              </ul>
              <a href="#">
                <img src="./upload/jiadian1.png" alt="">
              </a>
            </div>
            <div class="col2">
              <a href="#">
                <img src="./upload/jiadian2.png" alt="">
              </a>
            </div>
            <div class="col3">
              <a href="#"><img src="./upload/jiadian3.1.png" alt=""></a>
              <a href="#"><img src="./upload/jiadian3.2.png" alt=""></a>
            </div>
            <div class="col4">
              <a href="#"><img src="./upload/jiadian4.png" alt=""></a>
            </div>
            <div class="col5">
              <a href="#"><img src="./upload/jiadian5.1.png" alt=""></a>
              <a href="#"><img src="./upload/jiaidan5.2.png" alt=""></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 间隔bargain -->
    <div class="main_bargain w">
      <img src="./upload/jiange_bargain.png" alt="">
    </div>
    <!-- 手机通讯 -->
    <div class="w jiadian">
      <!-- 标题 -->
      <div class="box-hd">
        <h3>手机通讯</h3>
        <div class="tab_list">
          <ul>
            <li><a href="#" class="default">热门</a>|</li>
            <li><a href="#">品质优选</a>|</li>
            <li><a href="#">新机尝鲜</a>|</li>
            <li><a href="#">高性价比</a>|</li>
            <li><a href="#">口碑推荐</a>|</li>
            <li><a href="#">合约机</a>|</li>
            <li><a href="#">手机卡</a>|</li>
            <li><a href="#">店铺精选</a>|</li>
            <li><a href="#">手机配件</a></li>
          </ul>
        </div>
      </div>
      <!--内容 -->
      <div class="box-bd">
        <div class="tab_content">
          <div class="tab_list_item1">
            <div class="col1">
              <ul>
                <li><a href="#">手机通讯</a></li>
                <li><a href="#">以旧换新</a></li>
                <li><a href="#">双卡双待</a></li>
                <li><a href="#">自营配件</a></li>
                <li><a href="#">金属机身</a></li>
                <li><a href="#">高清平</a></li>
              </ul>
              <a href="#">
                <img src="./upload/shouji1.png" alt="">
              </a>
            </div>
            <div class="col2">
              <a href="#">
                <img src="./upload/shouji2.png" alt="">
              </a>
            </div>
            <div class="col3">
              <a href="#"><img src="./upload/shouji3.1.png" alt=""></a>
              <a href="#"><img src="./upload/shouji3.2.png" alt=""></a>
            </div>
            <div class="col4">
              <a href="#"><img src="./upload/shouji4.png" alt=""></a>
            </div>
            <div class="col5">
              <a href="#"><img src="./upload/shouji5.1.png" alt=""></a>
              <a href="#"><img src="./upload/shouji5.2.png" alt=""></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 首页专有的模块 楼层区floor 模块 end-->

  <!-- footer start -->
  <div class="footer">
    <div class="w">
      <!-- mod_service -->
      <div class="mod_service">
        <ul>
          <li>
            <i class="mod_service_icon mod_service_zheng"></i>
            <div class="zheng_info">
              <h5>正品保障</h5>
              <p>正品保障，提供发票</p>
            </div>
          </li>
          <li>
            <i class="mod_service_icon mod_service_ji"></i>
            <div class="zheng_info">
              <h5>急速物流</h5>
              <p>急速物流，急速送达</p>
            </div>
          </li>
          <li>
            <i class="mod_service_icon mod_service_wu"></i>
            <div class="zheng_info">
              <h5>无忧售后</h5>
              <p>7天无理由退换货</p>
            </div>
          </li>
          <li>
            <i class="mod_service_icon mod_service_te"></i>
            <div class="zheng_info">
              <h5>特色服务</h5>
              <p>私人定制家电套餐</p>
            </div>
          </li>
          <li>
            <i class="mod_service_icon mod_service_bang"></i>
            <div class="zheng_info">
              <h5>帮助中心</h5>
              <p>您的购物指南</p>
            </div>
          </li>
        </ul>



      </div>
      <!-- mod_help -->
      <div class="mod_help">
        <dl class="mod_help_list">
          <dt class="mod_help_tit">购物指南</dt>
          <dd>购物流程</dd>
          <dd>会员介绍</dd>
          <dd>生活旅行/团购</dd>
          <dd>常见问题</dd>
          <dd>大家电</dd>
          <dd>联系客服</dd>
        </dl>
        <dl class="mod_help_list">
          <dt class="mod_help_tit">配送方式</dt>
          <dd>上门自提</dd>
          <dd>211限时达</dd>
          <dd>配送服务查询</dd>
          <dd>配送费收取标准</dd>
          <dd>海外配送</dd>
        </dl>
        <dl class="mod_help_list">
          <dt class="mod_help_tit">支付方式</dt>
          <dd>货到付款</dd>
          <dd>在线支付</dd>
          <dd>分期付款</dd>
          <dd>邮局汇款</dd>
          <dd>公司转账</dd>
        </dl>
        <dl class="mod_help_list">
          <dt class="mod_help_tit">售后服务</dt>
          <dd>售后政策</dd>
          <dd>价格保护</dd>
          <dd>退款说明</dd>
          <dd>返修/退换货</dd>
          <dd>取消订单</dd>
        </dl>
        <dl class="mod_help_list">
          <dt class="mod_help_tit">特色服务</dt>
          <dd>夺宝岛</dd>
          <dd>DIY装机</dd>
          <dd>延保服务</dd>
          <dd>品优购E卡</dd>
          <dd>品优购通信</dd>
        </dl>
        <dl class="mod_help_list mod_erweima">
          <dt class="mod_help_tit">帮助中心</dt>
          <dd><img src="upload/erweima.png" alt=""></dd>
          <dd class="erwema_info">品优购客户端</dd>
        </dl>
      </div>
      <!-- mod_copyright -->
      <div class="mod_copyright">
        <p class="mod_copyright_links">
          &nbsp;&nbsp;&nbsp;关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English
          Site | Contact U
        </p>
        <p class="mod_copyright_info">
          地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
          <br>京ICP备08001421号京公网安备110108007702

        </p>
      </div>
    </div>
  </div>
  <!-- footer end -->

  <script>
    // 获取盒子
    var lis = document.getElementsByClassName('sprite')
    console.log(lis);
    for (var i = 0; i < lis.length; i++) {
      // 每个图标间隔的距离
      var index = i * 28
      // 设置盒子的背景定位
      lis[i].style.backgroundPosition = '0 -' + index + 'px'
    }
  </script>
  <!-- Swiper JS -->
  <script src="./js/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      autoplay:true,
      cssMode: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination'
      },
      mousewheel: true,
      keyboard: true,
      loop: true
    });
  </script>
</body>

</html>